<template>
	<view class="home">
		<aha-navbar	title="首页" />
		<!-- 搜索栏 -->
		<view class="search-container">
			<search-input
				placeholder="请输入搜索内容"
				disabled
				@clickInput="$router.navigateToSearch"
				@clickSearch="$router.navigateToSearch"
			/>
			<Navs />
		</view>
		<view>
			<!-- TODO: 周边选择 -->
		</view>
		<!-- 轮播图 -->
		<view>
			<SlideCard />
		</view>
		<!-- 导航跳转 & 项目列表 -->
		<view class="container">
			<Projects ref="Projects" />
		</view>
		<AhaTabbar />
	</view>
</template>

<script>
import { getShareAppData } from '@/utils/index'
import { eventStoreLeave } from '@/utils/eventStore'
import SlideCard from './components/SlideCard'
import Navs from './components/Navs'
import Projects from './components/Projects'

export default {
  components: {
    SlideCard,
    Navs,
    Projects
  },
  onHide() {
    eventStoreLeave()
  },
  onReachBottom() {
    const DomProjects = this.$refs.Projects

    if (DomProjects.loadStatus === 'loadmore') {
      DomProjects.loadProjects(DomProjects.pageNum + 1)
    }
  },
  onPullDownRefresh() {
    this.$refs.Projects.loadProjects(1)
  },
  onShareAppMessage() {
    return getShareAppData(`Aha口袋欢迎您的加入`)
  },
}
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  padding: 0 20px;
  background-color: $primary5;

  .search-container {
    padding: 20px;
    margin-block: 20px;
    background-color: #ffffff;
    border-radius: $radiusLarge;
  }

  .container {
    min-height: 60vh;
    margin: 30px 0;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: $radiusLarge;
  }
}
</style>

